<template>
  <div class="home">
    <order />
    <div class="home__cards">
      <template v-for="item in testerList">
        <instrument-card :title="item.title" :icon="item.image" :key="item.key" class="home__card"
          @click="jumpInRouter(item)" />
      </template>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import Order from '@/business/order';
import InstrumentCard from '@/business/instrument-card';
import BlueTooth from '@/business/blue-tooth';
import { testerList } from '@/config/tester';
import { storage } from '@/modules/storage';

@Component({
  name: 'Home',
  components: {
    Order,
    InstrumentCard,
    BlueTooth,
  }
})
export default class Home extends Vue {
  private testerList = testerList;

  jumpInRouter(item: typeof testerList[number]) {
    const order = storage.get('order');
    if (!order) {
      this.$toast({ message: '请先输入作业单号', duration: 2500, icon: 'warning-o' });
      return;
    }
    this.$store.dispatch('setTester', item.key);
    this.$router.push({ path: '/tester' });
  }
}
</script>

<style lang="scss" scoped>
.home {
  background: #f3f3f3;
  width: 100%;
  height: 100%;

  &__cards {
    margin: 16px 12px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 10px;
  }

}
</style>
